<template>
    <div class="public-box">
        <div class="header-btn">
            <el-button class="btn add-user" type="primary" @click="handleAddClick">添加员工</el-button>
        </div>
        <el-table
            :data="tableData"
            border
            style="width: 100%"
            class="el-table-public"
            height="100%">
            <el-table-column
                prop="date"
                label="日期"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="address"
                label="地址">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="155">
                <template slot-scope="scope">
                    <el-button @click="handleUpdateClick(scope.row)" type="text" size="small">查看记录</el-button>
                    <el-button @click="handleUpdateClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="handleDeleteClick(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="添加新员工" :visible.sync="addUserDialog">
            <el-form :model="addUserForm" :label-width="formLabelWidth">
                <el-form-item label="员工名：" >
                    <el-input v-model="addUserForm.userName"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addUserDialog = false">确 定</el-button>
                <el-button @click="addUserDialog = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'vue',
    data() {
        return {
            tableData: [
                {
                    date: '2016-05-02',
                    name: '员工1',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '员工2',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '员工3',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '员工4',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '员工5',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '员工6',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '员工7',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '员工8',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '员工9',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '员工10',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '员工11',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '员工12',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '员工13',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '员工14',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '员工15',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '员工16',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '员工17',
                    address: '上海市普陀区金沙江路 1516 弄'
                }
            ],
            addUserDialog: false,
            formLabelWidth: '80px',
            addUserForm: {
                userName: '',
            }
        }
    },
    props: {

    },
    components: {

    },
    computed: {

    },
    watch: {

    },
    methods: {
        // !添加员工点击事件
        handleAddClick () {
            console.log('添加员工点击事件')
            this.addUserDialog = true;
        },
        // !编辑员工点击事件
        handleUpdateClick (row) {
            this.addUserDialog = true;
            this.addUserForm.userName = row.name;
            console.log(this.addUserForm.userName)
        },
        // !删除员工点击事件
        handleDeleteClick (row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        handleClick() {

        }
    },
    created() {

    },
    mounted() {

    }
}
</script>

<style scoped lang="less">
    
    .el-table-public {
        // max-height: 550px;      
    }
</style>
